<template>
    <div>
     <h1>居民信息列表展示</h1>
     <a href="/AddView">居民信息录入</a>
     <br>
     <a href="/ShowStaffView">职员列表展示</a>
     <br>
     姓名：<input type="text" v-model="find.name">
     居民类型： <select v-model="find.usertypeid">
                    <option value="0">请选择</option>
                    <option v-for="b in qwert" :value="b.userTypeId">{{ b.name }}</option>
                 </select>
     <input type="button" value="查询" @click="Show">
     <table class="table">
        <thead >
            <tr>
                <td>
                        <input type="checkbox"  v-model="qx" @change="upXz" ><span>{{qx?"全不选":"全选"}}</span>
                    </td>
                <td>姓名</td>
                <td>类型</td>
                <td>图像</td>
                <td>性别</td>
                <td>手机号</td>
                <td>房间</td>
                <td>楼栋</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="a in data">
                 <td>
                        <input type="checkbox" :value="a.id" v-model="ids" >
                    </td>
                 <td>{{a.name  }}</td>
                <td>{{ a.userType }}</td>
                <td> <img :src="'https://localhost:7134'+a.img" style="height: 60px;width: 60px;"></td>
                <td>{{ a.sex==1?"男":"女" }}</td>
                <td>{{a.phone  }}</td>
                <td>{{a.room  }}</td>
                <td>{{a.floor  }}</td>
                <td>{{a.start?"未审核":"已审核"  }}</td>
                <td><input type="button" value="编辑" @click="UptUser(a.id)"></td>
            </tr>
        </tbody>
     </table>
    共{{ swert.count }}数，每页{{ find.size }}条，共{{ find.index }}/{{swert.totalpage  }}页
     <input type="button" value="首页" @click="Fanye(1)">
      <input type="button" value="上一页" @click="Fanye(find.index-1)">
      <input type="button" v-for=" c in swert.totalpage" :value="c" @click="Fw(c)">
       <input type="button" value="下一页" @click="Fanye(find.index+1)">
        <input type="button" value="尾页" @click="Fanye(swert.totalpage)">
          <input type="button" value="批量删除" @click="DEleteMember">
            <input type="button" value="批量修改" @click="UptHost">
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from "axios";
import { useRouter } from "vue-router";
const router=useRouter()
const UptUser=(id:any)=>{
    router.push({path:"/UptView",query:{id:id}})
}
onMounted(()=>{
    Show()
})
const data=ref([{
     "id": 2,
      "name": "张三",
      "userTypeId": 1,
      "img": "/pic/d870cdc1-fbe2-48ee-a0ce-8536522fbb5a1.png",
      "sex": 1,
      "phone": "13445666785",
      "room": "1001",
      "floor": "经济学区1号楼1单元",
      "start": true,
      "userType": "业主"
}])
const Show=()=>{
    axios.get("https://localhost:7134/api/User/GetUser",{params:find.value}).then(res=>{
        data.value=res.data.data
        swert.value.count=res.data.count
        swert.value.totalpage=Math.ceil(swert.value.count/find.value.size)
    })
}
 
    const qx = ref(false)
   
    const ids = ref<number[]>([])

    const upXz =()=>{
        if(qx.value){
            data.value.forEach((a: { id: number; }) => {
                ids.value.push(a.id)
            });
        }else{
            ids.value =[]
        }
    }
const DEleteMember=()=>{
        if(!confirm('确认删除?')){
            return
        }
        axios.delete("https://localhost:7134/api/User/DelUser",{params:{ids:ids.value.toString()}}).then(res=>{
            if(res.data>0){
                alert('删除成功')
                qx.value = false
                Show()
            }else{
                alert('删除失败')
            }
        })
    }
      const UptHost=()=>{
        if(!confirm('确认修改吗?')){
            return
        }
        axios.get("https://localhost:7134/api/User/UptStart",{params:{idstring:ids.value.toString()}}).then(res=>{
            if(res.data>0){
                alert('修改成功')
                qx.value = false
                Show()
            }else{
                alert('修改失败')
            }
        })
    }
const Fanye=(val:any)=>{
      if(val>=1 && val<=swert.value.totalpage){
        find.value.index=val
        Show()
      }
}
const Fw=(val:any)=>{
     find.value.index=val
     Show()
}
const find=ref({
    name:"",
    usertypeid:0,
    index:1,
    size:2
})
const swert=ref({
    count:0,
    totalpage:0
})
onMounted(()=>{
    Xiala()
})
const qwert=ref([{
     "userTypeId": 0,
    "name": ""
}])
const Xiala=()=>{
  axios.get("https://localhost:7134/api/User/Xiala").then(res=>{
    qwert.value=res.data
  })
}
</script>

<style scoped>

</style>